<template>
  <div id="table_container">
    <el-card style="margin-bottom: 5px; text-align: left">
      <el-input v-model="keyWord" placeholder="输入搜索内容" style="width: 200px;"
                @keyup.enter.native="handleFilter"></el-input>
      <el-select v-model="reportType" placeholder="筛查类别" style="width: 110px;margin-left: 10px;">
        <el-option v-for="item in importanceOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select v-model="schoolId" placeholder="检查学校" style="width: 180px;margin-left: 10px;">
        <el-option v-for="item in schoolOptions" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-select v-model="hospitalId" placeholder="检查医院" style="width: 180px;margin-left: 10px;">
        <el-option v-for="item in hospitalOptions" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter" style="margin-left: 10px;">
        查询
      </el-button>
      <el-button v-permission="['report:add']"  class="create_btn" style="float: right;" type="primary" icon="el-icon-edit" @click="handleCreate">
        新增
      </el-button>
    </el-card>
    <el-card>
      <el-table
          :data="tableData"
          v-loading="loading"
          row-key="id"
          border>
        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="number"
            align="center"
            width="130"
            label="档案编号">
        </el-table-column>
        <el-table-column
            prop="patient_name"
            width="100"
            label="患者">
        </el-table-column>
        <el-table-column
            align="center"
            width="80"
            prop="report_type_label"
            label="筛查类别">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.report_type === 0 ? 'success' :scope.row.report_type === 1 ? 'primary' :'warning' "
                disable-transitions>{{ scope.row.report_type_label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="school_name"
            label="学校">
        </el-table-column>
        <el-table-column
            prop="hospital_name"
            label="医院">
        </el-table-column>
        <el-table-column
            label="创建时间"
            align="center"
            width="120">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            width="280"
            align="center"
            label="操作">
          <template slot-scope="scope">
            <el-button v-permission="['report:detail']" @click="handleDetail(scope.row)" title="查看详情" type="primary" icon="el-icon-search" size="small">
              详情
            </el-button>
            <el-button v-permission="['report:print']" @click="handlePrint(scope.row)" title="打印" type="success" icon="el-icon-printer" size="small">
              打印
            </el-button>
            <el-button v-permission="['report:delete']" @click="handleDelete(scope.row)" title="删除" type="danger" icon="el-icon-delete" size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
          v-show="pageTotal>0"
          :total="pageTotal"
          :page.sync="page"
          :pageSize.sync="pageSize"
          @pagination="getDataList"/>
    </el-card>
    <print
        v-if="dialogVisible"
        :report-id="reportId"
        :visible.sync="dialogVisible"
        @updateVisible="updateVisible">
    </print>
  </div>
</template>

<script>
import {deleteReport, getHospitals, getReport, getSchools} from "@/api";
import pagination from "@/components/Pagenation";
import print from "@/components/Print";


export default {
  name: "index",
  components: {
    pagination,
    print
  },


  data() {
    return {
      tableData: [],
      loading: true,
      keyWord: undefined,
      reportType: undefined,
      schoolId: undefined,
      hospitalId: undefined,

      // 分页器相关
      page: 1,
      pageTotal: 0,
      pageSize: 10,

      importanceOptions: [
        {label: '初筛', value: 0},
        {label: '复测', value: 1},
        {label: '复查', value: 2},
      ],
      schoolOptions: [],
      hospitalOptions: [],


      dialogVisible: false,
      reportId: undefined,


    }
  },
  mounted() {
    this.initData()
    this.reportId = this.$route.params.patientId
    this.getDataList({patientId: this.reportId})
  },
  methods: {
    initData() {
      getSchools().then(res => {
        this.schoolOptions = res.data
      });
      getHospitals().then(res => {
        this.hospitalOptions = res.data
      });

    },
    getDataList(params = {}) {
      params.patientId = this.reportId
      this.loading = true
      params['page'] = this.page
      params['pageSize'] = this.pageSize
      params['keyWord'] = this.keyWord
      params['reportType'] = this.reportType
      params['schoolId'] = this.schoolId
      params['hospitalId'] = this.hospitalId
      getReport(params).then(res => {
        this.tableData = res.data.results;
        this.pageTotal = res.data.count;
        setTimeout(() => {
          this.loading = false
        }, 1.5 * 500)
      })
    },
    handleFilter() {
      this.getDataList()
    },
    handleDetail(row) {
      this.$router.push({name: 'reportDetail', params: {id: row.id}})
    },
    handleCreate(row) {
      this.$router.push({name: 'createReport'})
    },
    handlePrint(row) {
      this.reportId = row.id
      this.dialogVisible = true
    },
    handleDelete(row) {
      deleteReport(row.id).then(res => {
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    // 修改是否让页面显示与隐藏的事件
    updateVisible(val) {
      this.dialogVisible = val
    },

  }

}

</script>

<style scoped>

.p3 {
  padding: 0 20px 60px 20px;
}

.flex {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

.items-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
}

.mt1 {
  margin-top: .5rem;

}

.mr1 {
  margin-right: .5rem;
}

.flex-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.justify-between {
  -ms-flex-pack: justify;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.pb1 {
  padding-bottom: .5rem;
}

.mt2 {
  margin-top: 1rem;
}

.p1 {
  padding: .5rem;
}

.border {
  border-style: solid;
  border-width: 1px;
}

.flex-center {
  -ms-flex-align: center;
  -webkit-box-align: center;
  align-items: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
}

.borderRight {
  border-right: 1px solid #000;
}

.borderBottom {
  border-bottom: 1px solid #000;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ml1, .mx1 {
  margin-left: .5rem;
}
</style>